<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Log in failed</title>
        <link rel="stylesheet" type="text/css" href="./static/css/base.css"/>
        <style>
            @keyframes text-enter {
                0% {
                    opacity: 0;
                    margin-top: 50px;
                    animation-timing-function: linear;
                }
                50% {
                    opacity: .5;
                    margin-top: 30px;
                    font-weight: bold;
                    animation-timing-function: linear;
                }
                100% {
                    opacity: 1;
                    margin-top: 15px;
                    font-weight: bolder;
                    animation-timing-function: linear;
                }
            }

            .msg-box {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 270px;
                height: auto;
                text-align: center;
                display: flex;
                flex-direction: column;
            }

            .icon-area {
                width: 100%;
                text-align: center;
            }

            .tip-words {
                margin-top: 15px;
                font-weight: bolder;
                animation: 2s linear 0s normal text-enter;
            }

            .button-area {
                display: flex;
                flex-direction: row;
                margin-top: 15px;
                margin-inline: auto;
            }
        </style>
        <script lang="JavaScript">
            const toLogin = () => {
                const target_href = window.location.href.slice(0, window.location.href.lastIndexOf('/')) + '/login.jsp'
                window.location.href = target_href
            }
        </script>
    </head>
    <body>
        <div class="msg-box">
            <div class="icon-area">
                <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" fill="currentColor" class="bi bi-x-square-fill" viewBox="0 0 16 16">
                    <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z"/>
                </svg>
            </div>
            <div class="tip-words">
                <span>登录失败，用户名不存在或密码错误</span>
            </div>
            <div class="button-area">
                <div class="format-button danger-button" style="font-size: 14px;" onclick="toLogin()">返回登录</div>
            </div>
        </div>
    </body>
</html>
